<template>
  <div class="container">
    <!-- header -->
    <van-nav-bar
      title="标题"
      left-text="返回"
      right-text="按钮"
      :left-arrow="true"
      @click-left="onClickLeft"
      @click-right="onClickRight"
      />
      <!-- 测试自己写的样式能否转换 -->
      <div class="test">
        自己写的样式是否可以转换
        <!-- 行内样式不能被转换 -->
      </div>
      <div class="gol">
        使用全局样式
      </div>
    <div>
      <van-button loading type="primary" />
      <van-button loading type="primary" loading-type="spinner" />
      <van-button loading type="info" loading-text="加载中..." />
      <p>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="info">信息按钮</van-button>
        <van-button type="default">默认按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>
    </p>
      <!-- 骨架屏 -->
      <p>
        <van-skeleton :title="true" avatar :row="10" />
      </p>
    </div>
  </div>
</template>

<script>
export default {
  // 组件的名字
  name: 'home-index',
  methods: {
    onClickLeft () {
      console.log('点击left')
    },
    onClickRight () {
      console.log('点击right')
    }
  }
}
</script>

<style lang="less" scoped>

  .test {
    width: 100px;
    height: 100px;
    background: orange;
    border-right: 1px solid red;
    color: yellow;
  }

</style>
